<script setup>
import { onMounted, ref } from "vue";
import { setEnterprise , delEnterprise } from '../../api/company'
import { useRouter } from "vue-router";
import popupFrame from  './components/PopUpFrame.vue'
onMounted(() => {
  getEnterprise()
})
const dialogRef = ref(null)
const router = useRouter()
//表格数据
const tableData = ref([])
// 分页事件
const pageSizeData =ref({
  name:null,
  page:1,
  pageSize:5
}) 
const total = ref(0)
const handleSizeChange = (val) => { 
  pageSizeData.value.pageSize = val
  getEnterprise()
  // console.log(pageSizeData.value.pageSize) 
 }
const handleCurrentChange = (val) => { 
  pageSizeData.value.page = val
  getEnterprise()
  // console.log(`当前页: ${val}`) 
  // console.log(pageSizeData.value.page) 
  }
  //获取数据列表
const getEnterprise =async () =>{
  const res = await setEnterprise(pageSizeData.value)
  tableData.value = res.data.rows
  total.value = res.data.total
  console.log(res);
  }
  //筛选
const sift = () => {
  getEnterprise()
  pageSizeData.value.name = null
}
  //编辑
const handleEdit = (row , name) =>{ 
  if(row === 'add'){
    return router.push(`/company/enterprise/${row}`) 
  }
  if(name === 'see'){
    return router.push(`/company/enterprise/${row}/${name}`)
  }
  if(name ==='edit'){
    return router.push(`/company/enterprise/${row}/${name}`)
  }
  if(name ==='open'){
    open()
  }
 }
 //弹框控制
 const open = () => {
  dialogRef.value.isShow = true
  };
  //删除
const handleDelete = async (id) => {
   await delEnterprise(id)
   getEnterprise()
 }

</script>

<template>
  <popupFrame ref="dialogRef"></popupFrame>
  <div class="build">
   <div class="build_search"> 
    <div>企业名称:</div>
    <el-input class="input" v-model="pageSizeData.name" placeholder="请输入企业名称" />
    <el-button class="but" type="primary" @click="sift">查询</el-button>
   </div>

   <el-button @click="handleEdit('add')" class="addbuild" type="primary">添加企业</el-button>

   <div class="">

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand" width="80">
        <template #default>
          <el-table empty-text="暂无数据"  style="width: 100%">
            <el-table-column  label="租赁楼宇" width="180"> </el-table-column>
            <el-table-column  label="租赁起止时间" width="180"> </el-table-column>
            <el-table-column  label="合同状态" width="180"> </el-table-column>
            <el-table-column  label="操作" width="180"> </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="序号" prop="id" width="80"> </el-table-column>
      <el-table-column label="企业名称" prop="name" width="200"> </el-table-column>
      <el-table-column label="联系人" prop="contact" width="180"> </el-table-column>
      <el-table-column label="联系电话" prop="contactNumber" width="180"> </el-table-column>
      <el-table-column label="操作" width="380">
      <template #default="{row}">
        <el-button @click="handleEdit(row.id , 'open')">添加合同</el-button>
        <el-button @click="handleEdit(row.id , 'see')">查看</el-button>
        <el-button @click="handleEdit(row.id, 'edit')">编辑</el-button>
        <el-button               
          :disabled="!!row.existContractFlag"
          type="danger"
          @click="handleDelete(row.id)"
          >删除</el-button>
      </template>  
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="pageSizeData.page"
        :page-sizes="[5, 10, 20]"
        :page-size="5"
        layout="total,  prev , pager , next , sizes "
        :total="total">
      </el-pagination>
    </div>
   </div>
  </div>
  <!--  -->
</template>

<style scoped>
.build{
  padding: 10px;
  background-color: #ffffff;
}
.build .build_search{
  display: flex;
  border-bottom: 1px solid #fffbfb;
  align-items: center;
  height: 60px;
  }
  .build_search .input{
    margin: 0 10px;
    width: 220px;
  }
  .build_search .input:hover{
    border-block-color:#4770ff ;
  }
  .build_search .but{
    background-color: #4770ff;
  }
  .build_search .but:hover{
    background-color: #7094ff;
  }
  .addbuild{
    margin: 20px 0;
    color: #fff;
    background-color: #4770ff;
  } .addbuild:hover{
    background-color: #7094ff;
  }
  .pagination{
  display: flex;
  justify-content: right;
  width: 100%;
  margin: 20px -20px;
}
</style>
